<template>
  <div>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 跳转的同时携带query参数 —— 纯拼串的写法，非常不推荐 -->
        <!-- <router-link :to="`/home/message/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</router-link> -->

        <!-- 跳转的同时携带query参数 ——  -->
        <router-link 
          :to="{
            // path:'/home/message/detail',
            name:'xiang',
            query:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }" 
        >
          {{news.title}}
        </router-link>
      </li>
    </ul>
    <!-- 展示区（内容区） -->
    <div class="panel panel-body panel-primary">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        newsList:[
          {id:'asd01',title:'《好消息》',content:'阿里云服务器再次折扣，尽快选购！'},
          {id:'asd02',title:'《来自缅北的一个祝福》',content:'欢迎来到缅北，看我割不割你就完了'},
          {id:'asd03',title:'《如何一夜暴富》',content:'做梦吧，梦里啥都有'},
        ]
      }
    },
  }
</script>